<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>帮我找房</title>
        <link rel="stylesheet" href="./css/reset.css" />
        <link rel="stylesheet" href="./css/global.css" />
        <link rel="stylesheet" href="./css/element-ui.css" />
        <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css" />
        <link rel="stylesheet" href="./css/searchHouse.css" />
        <script src="./js/adapter.js"></script>
    </head>
    <body>
        <div id="app">
            <div class="bg">
                <img src="./img/bg.png" class="bg" />
            </div>
            <div class="title">为您找到一个满意的家</div>
            <div class="search_page">
                <div class="form_item_info">
                    <div class="content_title_wrap">
                        <div class="title_line"></div>
                        <div class="content_title fs16">您的预算总价范围:</div>
                    </div>
                    <div class="item_value fs14">
                        <input
                            v-model="minValue"
                            type="number"
                            class="item_input"
                            bindblur="valueChange"
                            data-type="minValue"
                            maxlength="6"
                        />
                        <div style="margin: 0 1rem">-</div>
                        <input
                            v-model="maxValue"
                            type="number"
                            class="item_input fs14"
                            bindblur="valueChange"
                            data-type="maxValue"
                            maxlength="6"
                            :focus="minValueFocus"
                        />
                        <div style="margin: 0 0 0 1rem">万</div>
                    </div>
                    <div class="selected_wrap">
                        <div
                            class="small_tip fs13"
                            :class="[idxQ==item.id?'small_tip_active':'']"
                            v-for="(item,index) in houseQty"
                            :key="item.id"
                            @click="selectHandle('houseQty',item)"
                        >
                            {{item.name}}
                        </div>
                    </div>
                </div>
                <div class="form_item_info">
                    <div class="content_title_wrap">
                        <div class="title_line"></div>
                        <div class="content_title fs16">您购买的偏好？</div>
                    </div>
                    <div class="selected_wrap">
                        <div
                            class="small_tip fs13"
                            :class="[idxT==item.id?'small_tip_active':'']"
                            v-for="(item,index) in houseType"
                            :key="item.id"
                            @click="selectHandle('houseType',item)"
                        >
                            {{item.name}}
                        </div>
                    </div>
                </div>
                <div class="form_item_info">
                    <div class="content_title_wrap">
                        <div class="title_line"></div>
                        <div class="content_title fs16">您想买什么户型？</div>
                    </div>
                    <div class="selected_wrap">
                        <div
                            class="small_tip fs13"
                            :class="[item.isSelected?'small_tip_active':'']"
                            v-for="(item,index) in houseModel"
                            :key="item.id"
                            @click="selectHandle('houseModel',item)"
                        >
                            {{item.name}}
                        </div>
                    </div>
                </div>
                <div class="form_item_info">
                    <div class="content_title_wrap">
                        <div class="title_line"></div>
                        <div class="content_title fs16">您想买的区域是？</div>
                    </div>
                    <div
                        class="selected_down fs14"
                        @click="popupVisible = true"
                    >
                        <div>{{districtName}}</div>
                        <div><i class="el-icon-arrow-down"></i></div>
                        <!-- <el-select v-model="districtName" placeholder="请选择">
                            <el-option
                                v-for="item in district"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name"
                            >
                            </el-option>
                        </el-select> -->
                    </div>
                </div>
                <div class="form_item_info">
                    <div class="content_title_wrap">
                        <div class="title_line"></div>
                        <div class="content_title fs16">特殊要求</div>
                    </div>
                    <div class="selected_wrap">
                        <div
                            class="small_tip fs13"
                            :class="[item.isSelected?'small_tip_active':'']"
                            v-for="(item,index) in requireType"
                            :key="item.id"
                            @click="selectHandle('requireType',item)"
                        >
                            {{item.name}}
                        </div>
                    </div>
                </div>
                <div class="form_item_info">
                    <div class="content_title_wrap">
                        <div class="title_line"></div>
                        <div class="content_title fs16">您的联系方式？</div>
                    </div>
                    <div
                        class="fs14"
                        style="margin-left: 0.8125rem; line-height: 2rem"
                    >
                        {{phNumber}}
                    </div>
                </div>
                <div style="margin: 0.8rem 0 0 0.8125rem">
                    <div class="fs13 lh15">温馨提示</div>
                    <div class="fs13 myfc-1 mt10 lh15">
                        提交购房需求后将由津房优秀的房产经纪人为您提供专业的服务
                    </div>
                    <div class="fs13 lh3 fc-5">
                        现在提交找房需求，专享经纪人一对一帮您找房
                    </div>
                </div>
                <button class="submit_btn fs16" @click="submit">提 交</button>
            </div>
            <mt-popup
                v-model="popupVisible"
                popup-transition="popup-fade"
                position="bottom"
            >
                <div class="pop_content">
                    <div class="head fs16">
                        <div></div>
                        <div class="fc-7" @click="onConfirm">确定</div>
                    </div>
                    <mt-picker
                        :slots="district"
                        @change="onChange"
                        :visible-item-count="3"
                    ></mt-picker>
                </div>
            </mt-popup>
        </div>
        <script src="./plugins/vue.min.js"></script>
        <script src="./plugins/axios.min.js"></script>
        <!-- 引入组件库 -->
        <script src="./plugins/element-ui.min.js"></script>
        <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
        <script src="./utils/baseUrl.js"></script>
        <script src="./js/searchHouse.js"></script>
    </body>
</html>
